<template>
	<div class="time-picker-container">
		<h2 class="title">请选择上门时间</h2>
		<p class="subtitle">服务开始前30分钟可免费修改时间</p>

		<div class="date-tabs">
			<button v-for="(date, index) in dateOptions" :key="index" :class="{ 'active': activeDate === index }"
				@click="activeDate = index">
				<text>{{ date.label }}</text>
				<text>{{ date.formattedDate }}</text>
			</button>
		</div>

		<div class="time-slots">
			<div v-for="(time, idx) in timeSlots" :key="idx" class="time-slot" :class="{
          'disabled': time.disabled,
          'selected': time.time === selectedTime && dateOptions[activeDate].date === selectedDate
        }" @click="selectTime(time)">
				{{ time.time }}
				<text v-if="time.disabled">约满</text>
				<text v-if="time.isNight" class="night-text">夜间</text>
			</div>
		</div>
		<div class="tips">
			<text style="color:#ff0000">*</text>夜间根据情况收取加价：夜间加价 <text style="color:#ff0000">{{uptick}}元</text>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue';
	import dayjs from 'dayjs'
	const props = defineProps({
		uptick: {
			type: Number,
			default: 40
		}
	})
	// 当前日期和未来三天的日期
	const today = new Date();
	const tomorrow = new Date(today);
	tomorrow.setDate(tomorrow.getDate() + 1);
	const dayAfterTomorrow = new Date(tomorrow);
	dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 1);
	const thirdDay = new Date(dayAfterTomorrow);
	thirdDay.setDate(thirdDay.getDate() + 1);
	const emit = defineEmits(['btnClick'])
	// 日期选项
	const dateOptions = ref([{
			label: '今天',
			date: today,
			formattedDate: formatDate(today)
		},
		{
			label: '明天',
			date: tomorrow,
			formattedDate: formatDate(tomorrow)
		},
		{
			label: '后天',
			date: dayAfterTomorrow,
			formattedDate: formatDate(dayAfterTomorrow)
		},
		{
			label: getWeekday(thirdDay),
			date: thirdDay,
			formattedDate: formatDate(thirdDay)
		}
	]);

	const activeDate = ref(0);
	const selectedDate = ref(null);
	const selectedTime = ref(null);

	// 生成时间槽 (7:00-21:00，每半小时)
	const generateTimeSlots = () => {
		const slots = [];
		for (let hour = 7; hour <= 21; hour++) {
			const minuteStep = hour === 21 ? 60 : 30;
			for (let minute = 0; minute < 60; minute += minuteStep) {
				const timeStr = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
				// 过时的显示已约满
				const isDisabled = activeDate.value == 0 && (today.getHours() > (hour - 2) || (today.getHours() == (
					hour - 2) && today.getMinutes() >= minute));
				slots.push({
					time: timeStr,
					disabled: isDisabled,
					isNight: hour > 18 || (hour === 18 && minute >= 30)
				});
			}
		}
		return slots;
	};

	const timeSlots = ref(generateTimeSlots());

	// 格式化日期为 MM月DD日
	function formatDate(date) {
		const month = date.getMonth() + 1;
		const day = date.getDate();
		return `${month}月${day}日`;
	}

	// 获取星期几
	function getWeekday(date) {
		const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
		return weekdays[date.getDay()];
	}

	// 选择时间
	const selectTime = (time) => {
		if (time.disabled) return;
		selectedDate.value = dateOptions.value[activeDate.value].date;
		let selTime = dayjs(selectedDate.value).format('YYYY-MM-DD')
		selectedTime.value = time.time;
		selTime = selTime + " " + selectedTime.value
		emit('btnClick', selTime, time.isNight)
	};

	// 监听日期变化重新生成时间槽
	watch(activeDate, () => {
		timeSlots.value = generateTimeSlots();
	});
</script>

<style scoped>
	.time-picker-container {
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		max-width: 400px;
		margin: 0 auto;
		padding: 20px;
		background-color: #f5f5f5;
		border-radius: 8px;
	}

	.title {
		font-size: 18px;
		font-weight: 600;
		margin-bottom: 8px;
		color: #333;
	}

	.subtitle {
		font-size: 12px;
		color: #999;
		margin-bottom: 10px;
	}

	.date-tabs {
		display: flex;
		margin-bottom: 10px;
		gap: 8px;
	}

	.date-tabs button {
		flex: 1;
		padding: 8px;
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center;
		cursor: pointer;
		transition: all 0.2s;
	}

	.date-tabs button.active {
		border-color: #1989fa;
		color: #1989fa;
	}

	.date-tabs text:first-child {
		font-size: 14px;
		font-weight: 500;
	}

	.date-tabs text:last-child {
		font-size: 12px;
		color: #666;
	}

	.time-slots {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.time-slot {
		position: relative;
		padding: 10px 5px;
		background: white;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		text-align: center;
		font-size: 14px;
		cursor: pointer;
		transition: all 0.2s;
	}

	.time-slot.selected {
		background-color: #fbd9dc;
		color: #333;
		border-color: #eb3644;
	}

	.time-slot.disabled {
		color: #ccc;
		cursor: not-allowed;
		position: relative;
	}

	.time-slot.disabled text {
		position: relative;
		z-index: 1;
		color: #ccc;
		font-size: 12px;
	}

	.night-text {
		z-index: 1;
		display: block;
		color: #cccc66;
		position: absolute;
		font-size: 12px;
		padding: 2px 5px;
		top: 0;
		left: 0;
	}

	.tips {
		font-size: 12px;
		color: #999;
		margin: 10px;
	}
</style>